<template>
	<div class="toMnav">
		<van-sticky>
		<div class="top">
			<img :src="img" alt="">
					<div class="left">
						<van-cell is-link title="北京" @click="show = true" />
						<van-action-sheet v-model="show" :actions="actions">
						</van-action-sheet>
					</div>
			
		
<div class="right">
	<!-- <van-sticky> -->
		<van-search v-model="value" placeholder="古北水镇" />
	<!-- </van-sticky> -->
</div>
		</div>
		</van-sticky>

<div class="bottom">
			<div ref="container" style="height: 50px;">
				<van-sticky :container="container">
					<van-button type="warning">
						<ul>
							<li>热搜:</li>
							<li>故宫博物院</li>
							<li>八达岭长城</li>
							<li>颐和园</li>
						</ul>
					</van-button>
				</van-sticky>
			</div>
</div>
	</div>
</template>

<script>
import { Toast } from 'vant';
export default {
	data() {
		return {
			value: '',
			container: null,
			img:"https://gw.alicdn.com/imgextra/i4/O1CN01JKpYmA1QGEF19SyzX_!!6000000001948-0-tps-750-390.jpg_Q75.jpg_.webp",
 	show: false,
			actions: [{ name: '' }],
		};

	},
	methods: {
		onConfirm(value) {
			this.value = value;
			this.showPicker = false;
		},
	},

	onSelect(item) {
		// 默认情况下点击选项时不会自动收起
		// 可以通过 close-on-click-action 属性开启自动收起
		this.show = false;
		Toast(item.name);
	},

	mounted() {
		this.container = this.$refs.container;
	},

}
</script>

<style scoped>
.toMnav{
	height: 1.8rem;
	box-sizing: border-box;
}
.top{
	height: 1.8rem;
	background-color: bisque;
	overflow: hidden;
}
.top img{
	width: 100%;
height: 1.8rem;
}

::v-deep .van-search__content{
	background-color: white;
}
::v-deep .van-search{
	width: 5.2rem;
	height: .7rem;
	position: relative;
	top: -2.3rem;
	left: 2rem;
	border-radius: 0 0 .35rem 0;
	border-left: 1px solid rgba(220, 214, 214, 0.502);
}
::v-deep .left .van-cell{
	width: 1.8rem;
	height: .7rem;
	color: red;
	position: relative;
	top: -1.6rem;
	left: .23rem;
	line-height: .4rem;
	border-radius: .3rem 0 0 .3rem  ;
}
::v-deep .van-button--warning{
	background-color: rgba(250, 235, 215, 0.016);
	border: 1px solid transparent;
}
::v-deep .left .van-icon{
line-height: .4rem;
margin-left: .2rem;
color: red;
}

::v-deep .bottom .van-button--warning{
	position: relative;
		top: -.9rem;
}
.bottom li{
float: left;
margin-left: 15px;
margin-right: .2rem;
}
</style>